/**webpack.config.js
 * webpack的配置文件
 * webpack的五大核心
 * 
 */
//导入nodejs 的内置模块  path
const path = require('path')
//导入html打包插件  
const HtmlWebpackPlugin = require('html-webpack-plugin')
//导入提取js中的css代码的两个插件
//引入 提取js中的css代码的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//将css文件及代码进行极致压缩s
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    //入口
    entry: {
        //公共css
        commonCss: './src/js/commonCss.js',
        //公共js
        dom: './src/js/common-js/dom.js',
        http: './src/js/common-js/http.js',
        utils: './src/js/common-js/utils.js',
        //三方js
        captcha: './src/lib/captcha-mini.js',
        swiper: './src/lib/swiper/swiper-bundle.js',
        weui: './src/lib/weui/weui.js',
        //js
        register: './src/js/register.js',
        login: './src/js/login.js',
        adver: './src/js/adver.js',
        home: './src/js/home.js',
        about: './src/js/about.js',
        edit: './src/js/edit.js',
        sports: './src/js/sports.js',
        sportsDetail: './src/js/sportsDetail.js',
        video: './src/js/video.js',
        sportData: './src/js/sportData.js',
    },

    //出口
    // dist/bundle.js
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js',
        publicPath: '../'
    },

    //解释器 loader
    module: {
        rules: [{
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader']
            },
            {
                test: /\.less$/, //配置less处理器
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader', 'less-loader']
            },
            {
                test: /\.(jpg|png|gif|svg)$/,
                loader: 'url-loader',
                options: {
                    //重命名 图片  长度16位数的随机字符串 ext:原来的图片的后缀
                    name: '[hash:16].[ext]',
                    //限制 小于多少的才进行打包  20kb以内图片进行打包
                    limit: 20 * 1024,
                    esModule: false,
                    outputPath: 'img',
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'fonts'
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader', // loader 编译es6为es5
                exclude: /node_modules/ // 排除
            }
        ],
    },

    //插件
    plugins: [
        // new 插件名({
        //     key:value
        // })
        //打包html 及html中的图片
        new HtmlWebpackPlugin({ //配置html打包的插件
            template: './src/page/register.html', //以哪个html文件作为打包的模板 
            filename: 'page/register.html',
            chunks: ['register', 'commonCss', 'dom', 'http', 'utils', "captcha"]
        }),
        new HtmlWebpackPlugin({ //配置html打包的插件
            template: './src/page/login.html', //以哪个html文件作为打包的模板 
            filename: 'page/login.html',
            chunks: ['login', 'commonCss', 'dom', 'http', 'utils']
        }),

        new HtmlWebpackPlugin({ //配置html打包的插件
            template: './src/page/adver.html', //以哪个html文件作为打包的模板 
            filename: 'page/adver.html',
            chunks: ['adver', 'commonCss', 'dom', 'utils']
        }),

        new HtmlWebpackPlugin({ //配置html打包的插件
            template: './src/page/home.html', //以哪个html文件作为打包的模板 
            filename: 'page/home.html',
            chunks: ['home', 'commonCss', 'dom', 'http', 'utils', 'swiper']
        }),

        new HtmlWebpackPlugin({ //配置html打包的插件
            template: './src/page/about.html', //以哪个html文件作为打包的模板 
            filename: 'page/about.html',
            chunks: ['about', 'commonCss', 'dom', 'http', 'utils']
        }),

        new HtmlWebpackPlugin({ //配置html打包的插件
            template: './src/page/about.html', //以哪个html文件作为打包的模板 
            filename: 'page/about.html',
            chunks: ['about', 'commonCss', 'dom', 'http', 'utils']
        }),

        new HtmlWebpackPlugin({ //配置html打包的插件
            template: './src/page/edit.html', //以哪个html文件作为打包的模板 
            filename: 'page/edit.html',
            chunks: ['edit', 'commonCss', 'dom', 'http', 'utils', 'weui']
        }),

        new HtmlWebpackPlugin({ //配置html打包的插件
            template: './src/page/sports.html', //以哪个html文件作为打包的模板 
            filename: 'page/sports.html',
            chunks: ['sports', 'commonCss', 'dom', 'http', 'utils']
        }),

        new HtmlWebpackPlugin({ //配置html打包的插件
            template: './src/page/sportsDetail.html', //以哪个html文件作为打包的模板 
            filename: 'page/sportsDetail.html',
            chunks: ['sportsDetail', 'commonCss', 'dom', 'http', 'utils']
        }),

        new HtmlWebpackPlugin({ //配置html打包的插件
            template: './src/page/video.html', //以哪个html文件作为打包的模板 
            filename: 'page/video.html',
            chunks: ['video', 'commonCss', 'dom', 'http', 'utils']
        }),

        new HtmlWebpackPlugin({ //配置html打包的插件
            template: './src/page/sportData.html', //以哪个html文件作为打包的模板 
            filename: 'page/sportData.html',
            chunks: ['sportData', 'commonCss', 'dom', 'http', 'utils']
        }),


        //提取js中的css代码
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),
        new OptimizeCssAssetsWebpackPlugin(),

    ],

    //环境 
    // mode: process.env.NODE_ENV,
    mode: 'development',

    //热更新 本地服务启动
    //webpack.config.js   
    // 开发服务器 配置【】
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip
        port: 8082, // 端口  8080 80  8081 8082
        open: true, // 自动打开服务
        publicPath: '/', // 静态资源查找路径
        openPage: 'page/home.html', // 打开的页面
    },
    target: 'web', // 目标是浏览器
}